<template>
  <div class="search">
    <nav-bar></nav-bar>
    <div class="search-page-main clearfix">
      <div class="spl" :style="radio1 === '' && radio2 === '全部' ? 'width:0px' : 'width:210px;margin-right:20px;'">
        <div class="xyd-container">
          <div class="xyd-c-title">
            资源版本
          </div>
          <div class="xyd-c-content">
            <el-tree
              v-if="sideCategory && sideCategory.length !== 0"
              :data="sideCategory"
              :highlight-current="true"
              :load="loadNode"
              :props="props"
              lazy
              @node-click="handleNodeClick">
            </el-tree>
          </div>
        </div>
      </div>
      <div class="spr" :style="radio1 === '' && radio2 === '全部' ? 'width:1200px' : 'width:960px'">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span style="float:left;margin-left:20px;">资源筛选</span>
            <a style="float:right;margin-right:20px;"
              href="javascript:;"
              @click="handleClear"
            >
              <i class="xyd-clear"></i>清空条件
            </a>
          </div>
          <div class="xyd-c-content">
            <div class="select1">
              <el-radio-group v-model="radio1" @change="handleChange1">
                <el-radio-button :label="item.name" v-for="item,i in category" :key="i"></el-radio-button>
              </el-radio-group>
            </div>
            <div class="select2">
              <label>资源级别：</label>
              <el-radio-group v-model="radio2" @change="handleChange2">
                <el-radio-button :label="item.name" v-for="item,i in level" :key="i"></el-radio-button>
              </el-radio-group>
            </div>
            <div class="search-group">
              <span>共找到{{total}}个资源</span>
              <form @submit="handleSearch" style="display:inline-block;margin-left:10px;">
                <el-input placeholder="搜索资源"
                  style="width:200px;"
                  icon="search"
                  v-model="key"
                  :on-icon-click="handleSearch"
                  v-if="radio1 !== '' || radio2 !== '全部'"
                >
                </el-input>
              </form>
            </div>
            <div v-loading.body="loading">
              <no-content v-if="!loading && (!source || source.length === 0)" ></no-content>
              <ul v-if="source && source.length !== 0" class="search-list">
                <li v-for="item,i in source" :key="i">
                  <resource-item :value="item"></resource-item>
                </li>
              </ul>
            </div>
            <div class="pagination-container">
              <el-pagination
                v-if="source && source.length !== 0"
                :page-size="offset"
                layout="total, prev, pager, next"
                :total="total"
                :current-page="page"
                @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSource, searchSource } from 'api/resource'
import { NavBar } from 'views/layout'
import { NoContent } from 'components/Sit'
import ResourceItem from 'views/components/resourceItem'
export default {

  name: 'search',
  components: {
    NavBar,
    ResourceItem,
    NoContent
  },
  data() {
    return {
      key: '',
      loading: false,
      radio1: '',
      radio2: '全部',
      category: [],
      sideCategory: [],
      level: [{ name: '全部' }],
      source: [],
      total: 0,
      page: 1,
      offset: 5,
      props: {
        label: 'name',
        children: 'child'
      }
    }
  },
  created() {
    this.key = this.$route.query.key
    // this.$store.di
    this.loading = true
    searchSource({
      title: this.$route.query.key,
      page: this.page,
      offset: this.offset
    })
    .then(res => {
      console.log(res)
      this.category = res.top1
      this.level = [{ name: '全部' }].concat(res.level)
      this.total = res.count
      this.source = res.source
      this.loading = false
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  mounted() {
    this.key = this.$route.query.key
  },
  methods: {
    fetchData(ctrl = false) {
      this.loading = true
      searchSource({
        title: this.key,
        catid: this.catid,
        slevel: this.slevel,
        page: this.page,
        offset: this.offset
      })
      .then(res => {
        if (ctrl) {
          this.sideCategory = res.child
        }
        this.loading = false
        this.total = res.count
        this.source = res.source
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    // 一级分类
    handleChange1(a) {
      const catid = this.category.filter(v => v.name === a)[0].id
      this.catid = catid
      this.page = 1
      this.fetchData(true)
    },
    // 资源级别
    handleChange2(a) {
      const slevel = this.level.filter(v => v.name === a)[0].value
      this.slevel = slevel
      this.page = 1
      this.fetchData()
    },

    // 搜索
    handleSearch(e) {
      e.preventDefault()
      this.$router.push({ query: { key: this.key } })
      this.page = 1
      this.fetchData()
    },
    // 左侧筛选
    handleNodeClick(data) {
      this.catid = data.id
      this.page = 1
      this.fetchData()
    },
    // 左侧筛选获取下一级
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.sideCategory)
      } else {
        getSource({
          catid: node.data.id
        })
        .then(res => {
          resolve(res.child)
        })
        .catch(err => console.log(err))
      }
    },
    // 分页
    handlePageChange(page) {
      this.page = page
      this.fetchData()
    },
    // 清除条件
    handleClear() {
      this.radio1 = ''
      this.radio2 = '全部'
      this.catid = null
      this.slevel = null
      this.page = 1
      this.fetchData()
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.search{
  .search-page-main{
    width: 1200px;
    margin: 0 auto;
    .spl{
      float: left;
      overflow: hidden;
    }
    .spr{
      float: left;
      .xyd-c-content{
        padding: 0 40px;
        .select1{
          padding: 20px 0;
          border-bottom: 1px solid #e5e6e7;
        }
        .select2{
          padding: 20px 0;
          border-bottom: 1px solid #e5e6e7;
        }
        .search-group{
          padding: 20px 0;
        }
        .search-list{
          min-height: 300px;
        }
      }
    }
  }
}
</style>